<template>
	<view class="withdraw-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="申请提现"></custom-navbar>
		
		<!-- 提现申请表单 -->
		<view class="form-card">
			<!-- 账户余额 -->
			<view class="balance-row">
				<view class="balance-label">账户余额</view>
				<view class="balance-amount">¥{{ availableBalance }}</view>
			</view>
			
			<!-- 提现金额 -->
			<view class="form-row">
				<view class="form-label">提现金额</view>
				<view class="input-wrapper">
					<input 
						v-model="withdrawForm.amount" 
						type="digit"
						placeholder="" 
						class="form-input"
						@input="onAmountInput"
					/>
					<text class="input-unit">元</text>
				</view>
			</view>
			
			<!-- 真实姓名 -->
			<view class="form-row">
				<view class="form-label">真实姓名</view>
				<input 
					v-model="withdrawForm.realName" 
					placeholder="" 
					class="form-input"
				/>
			</view>
			
			<!-- 银行选择 -->
			<view class="form-row">
				<view class="form-label">请选择银行</view>
				<view class="picker-wrapper" @click="showBankPicker">
					<text class="picker-text" :class="{ placeholder: !withdrawForm.bankName }">
						{{ withdrawForm.bankName || '请选择银行' }}
					</text>
					<image src="/static/收起箭头小.png" mode="aspectFit" class="select-arrow"></image>
				</view>
			</view>
			
			<!-- 银行卡号 -->
			<view class="form-row">
				<view class="form-label">请输入银行卡号</view>
				<input 
					v-model="withdrawForm.cardNumber" 
					type="number"
					placeholder="" 
					class="form-input card-number-input"
				/>
			</view>
			
			<!-- 安全提示 -->
			<view class="security-tip">
				车联网服务平台不会通过任何渠道泄露您的个人信息,请放心填写
			</view>
			
			<!-- 确认按钮 -->
			<button class="confirm-btn" @click="submitWithdraw" :disabled="!canSubmit">
				确认信息并提交
			</button>
		</view>
		
		<!-- 提现记录 -->
		<view class="records-card">
			<view class="records-title">提现记录</view>
			<view class="records-list">
				<view class="record-item" v-for="(record, index) in withdrawRecords" :key="index">
					<view class="record-left">
						<view class="record-desc">{{ record.description }}</view>
						<view class="record-time">{{ record.time }}</view>
					</view>
					<view class="record-right">
						<view class="record-amount">{{ record.amount }}</view>
						<view class="record-status" :class="record.status">{{ record.statusText }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 银行选择弹窗 -->
		<uni-popup ref="bankPicker" type="bottom">
			<view class="bank-picker-popup">
				<view class="picker-header">
					<text class="picker-title">选择银行</text>
					<uni-icons type="close" size="20" @click="closeBankPicker"></uni-icons>
				</view>
				<view class="bank-list">
					<view 
						class="bank-item" 
						v-for="bank in bankList" 
						:key="bank.value"
						@click="selectBank(bank)"
					>
						<text class="bank-name">{{ bank.name }}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
			availableBalance: '1500.00',
			withdrawForm: {
				amount: '',
				realName: '',
				bankName: '',
				cardNumber: ''
			},
			bankList: [
				{ name: '中国工商银行', value: 'icbc' },
				{ name: '中国建设银行', value: 'ccb' },
				{ name: '中国农业银行', value: 'abc' },
				{ name: '中国银行', value: 'boc' },
				{ name: '交通银行', value: 'bcm' },
				{ name: '招商银行', value: 'cmb' },
				{ name: '浦发银行', value: 'spdb' },
				{ name: '民生银行', value: 'cmbc' }
			],
			withdrawRecords: [
				{
					description: '商家提现申请',
					time: '核销时间:2022-10-12 11:09',
					amount: '- 100.00',
					status: 'reviewing',
					statusText: '审核中'
				},
				{
					description: '商家提现申请',
					time: '核销时间:2022-10-12 11:09',
					amount: '- 100.00',
					status: 'approved',
					statusText: '审核通过'
				},
				{
					description: '商家提现申请',
					time: '核销时间:2022-10-12 11:09',
					amount: '- 100.00',
					status: 'rejected',
					statusText: '审核不通过'
				}
			]
		}
	},
	computed: {
		canSubmit() {
			return this.withdrawForm.amount && 
				   this.withdrawForm.realName && 
				   this.withdrawForm.bankName && 
				   this.withdrawForm.cardNumber
		}
	},
	methods: {
		// 金额输入
		onAmountInput(e) {
			let value = e.detail.value
			// 限制只能输入数字和小数点
			value = value.replace(/[^\d.]/g, '')
			// 限制小数点后最多两位
			if (value.includes('.')) {
				const parts = value.split('.')
				if (parts[1] && parts[1].length > 2) {
					value = parts[0] + '.' + parts[1].substring(0, 2)
				}
			}
			this.withdrawForm.amount = value
		},
		
		// 显示银行选择器
		showBankPicker() {
			this.$refs.bankPicker.open()
		},
		
		// 关闭银行选择器
		closeBankPicker() {
			this.$refs.bankPicker.close()
		},
		
		// 选择银行
		selectBank(bank) {
			this.withdrawForm.bankName = bank.name
			this.closeBankPicker()
		},
		
		// 提交提现申请 - 对接后端API
		async submitWithdraw() {
			if (!this.canSubmit) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				})
				return
			}
			
			const amount = parseFloat(this.withdrawForm.amount)
			if (amount < 10) {
				uni.showToast({
					title: '提现金额不能少于10元',
					icon: 'none'
				})
				return
			}
			
			if (amount > parseFloat(this.availableBalance)) {
				uni.showToast({
					title: '提现金额不能超过账户余额',
					icon: 'none'
				})
				return
			}
			
			try {
				uni.showLoading({ title: '提交中...' })
				
				// 这里应该调用后端API
				// const response = await this.$api.submitWithdraw({
				//   amount: amount,
				//   realName: this.withdrawForm.realName,
				//   bankName: this.withdrawForm.bankName,
				//   cardNumber: this.withdrawForm.cardNumber
				// })
				
				// 模拟API调用
				await new Promise(resolve => setTimeout(resolve, 2000))
				
				uni.hideLoading()
				uni.showToast({
					title: '提现申请已提交',
					icon: 'success'
				})
				
				// 跳转到提现成功页面
				setTimeout(() => {
					// 准备传递给成功页面的数据
					const successData = {
						amount: this.withdrawForm.amount,
						method: '银行卡',
						account: this.withdrawForm.bankName + ' **** **** **** ' + this.withdrawForm.cardNumber.slice(-4),
						applyTime: new Date().toISOString().replace('T', ' ').substring(0, 19),
						expectedTime: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString().replace('T', ' ').substring(0, 19),
						orderNo: 'WD' + Date.now()
					};
					
					uni.navigateTo({
						url: `/pages/finance/withdraw-success?data=${encodeURIComponent(JSON.stringify(successData))}`
					})
				}, 1500)
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: '提现申请失败',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.withdraw-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
	position: relative;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
	
	&::before {
		content: '';
		position: absolute;
		top: calc(env(safe-area-inset-top) + 88rpx);
		left: 0;
		right: 0;
		height: 600rpx;
		background-image: linear-gradient(
			to bottom,
			#2f81fa 0%, #2f81fa 33.33%,
			#FFFFFF 33.33%, #FFFFFF 100% 
		);
		background-repeat: no-repeat;
		z-index: 0;
	}
}

// 提现申请表单卡片
.form-card {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 40rpx;
	margin: 20rpx;
	margin-top: 40rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	
	.balance-row {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		
		margin-bottom: 0rpx;
		
		.balance-label {
			font-size: 26rpx;
			color: #333333;
			font-weight: 500;
			width: 200rpx;
			flex-shrink: 0;
		}
		
		.balance-amount {
			font-size: 30rpx;
			font-weight: 500;
			color: #FF6600;
			
			flex: 1;
			padding-right: 24rpx;
		}
	}
	
	.form-row {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		// border-bottom: 1rpx solid #f0f0f0;
		
		&:last-of-type {
			border-bottom: none;
		}
		
		.form-label {
			font-size: 26rpx;
			color: #333333;
			font-weight: 500;
			width: 200rpx;
			flex-shrink: 0;
		}
		
		.input-wrapper {
			width: 200rpx;
			display: flex;
			align-items: center;
			background: #ffffff;
			border: 1rpx solid #e0e0e0;
			border-radius: 40rpx;
			padding: 0 24rpx;
			height: 80rpx;
			
			.form-input {
				flex: 1;
				font-size: 26rpx;
				color: #333333;
				height: 100%;
				border: none;
				background: transparent;
				font-weight: 400;
			}
			
			.input-unit {
				font-size: 26rpx;
				color: #666666;
				margin-left: 8rpx;
				font-weight: 400;
			}
		}
		
		.form-input {
			width: 200rpx;
			height: 80rpx;
			background: #ffffff;
			border: 1rpx solid #e0e0e0;
			border-radius: 40rpx;
			padding: 0 24rpx;
			font-size: 26rpx;
			color: #333333;
			font-weight: 400;
		}
		
		.card-number-input {
			width: 400rpx;
		}
		
		.picker-wrapper {
			width: 300rpx;
			height: 80rpx;
			background: #ffffff;
			border: 1rpx solid #e0e0e0;
			border-radius: 40rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.picker-text {
				font-size: 26rpx;
				color: #333333;
				font-weight: 400;
				
				&.placeholder {
					color: #999999;
				}
			}
			
			.select-arrow {
				width: 32rpx;
				height: 32rpx;
				transform: rotate(0deg);
			}
		}
	}
	
	.security-tip {
		text-align: left;
		font-size: 20rpx !important;
		color: #999999;
		margin: 40rpx 0 30rpx 10rpx;
		line-height: 1.5;
		padding-left: 0;
		font-weight: 400;
	}
	
	.confirm-btn {
		width: 100%;
		height: 96rpx;
		background: #2f81fa;
		color: #ffffff;
		border: none;
		border-radius: 48rpx;
		font-size: 30rpx;
		font-weight: 500;
		margin-top: 40rpx;
		
		&:disabled {
			background: #cccccc;
			color: #999999;
		}
	}
}

// 提现记录卡片
.records-card {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 40rpx;
	margin: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	
	.records-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 32rpx;
	}
	
	.records-list {
		.record-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.record-left {
				flex: 1;
				
				.record-desc {
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 12rpx;
					font-weight: 400;
				}
				
				.record-time {
					font-size: 22rpx;
					color: #999999;
					font-weight: 400;
				}
			}
			
			.record-right {
				text-align: right;
				
				.record-amount {
					font-size: 30rpx;
					font-weight: 500;
					color: #FF6600;
					margin-bottom: 8rpx;
				}
				
				.record-status {
					font-size: 22rpx;
					font-weight: 400;
					
					&.reviewing {
						color: #999999;
					}
					
					&.approved {
						color: #4caf50;
					}
					
					&.rejected {
						color: #f44336;
					}
				}
			}
		}
	}
}

// 银行选择弹窗
.bank-picker-popup {
	background: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx;
	
	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		
		.picker-title {
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
		}
	}
	
	.bank-list {
		.bank-item {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.bank-name {
				font-size: 24rpx;
				color: #333333;
				font-weight: 400;
			}
		}
	}
}
</style>
